<div class="bd-content">
<h1 class="bd-title" id="content">位置（position）</h1>
          <p class="bd-lead">使用这些工具快速配置元素的位置。</p>
          <h2 id="common-values">通用属性</h2>

<p>快速增加定位的类不包含响应式设计。</p>

<figure class="highlight"><pre><code class="language-html" data-lang="html"><span class="nt">&lt;div</span> <span class="na">class=</span><span class="s">"position-static"</span><span class="nt">&gt;</span>...<span class="nt">&lt;/div&gt;</span>
<span class="nt">&lt;div</span> <span class="na">class=</span><span class="s">"position-relative"</span><span class="nt">&gt;</span>...<span class="nt">&lt;/div&gt;</span>
<span class="nt">&lt;div</span> <span class="na">class=</span><span class="s">"position-absolute"</span><span class="nt">&gt;</span>...<span class="nt">&lt;/div&gt;</span>
<span class="nt">&lt;div</span> <span class="na">class=</span><span class="s">"position-fixed"</span><span class="nt">&gt;</span>...<span class="nt">&lt;/div&gt;</span>
<span class="nt">&lt;div</span> <span class="na">class=</span><span class="s">"position-sticky"</span><span class="nt">&gt;</span>...<span class="nt">&lt;/div&gt;</span></code></pre></figure>

<h2 id="fixed-top">固定在顶部</h2>

<p>将一个元素置于可视区的顶部，从边到边。必要时你需要增加额外的 CSS。</p>

<figure class="highlight"><pre><code class="language-html" data-lang="html"><span class="nt">&lt;div</span> <span class="na">class=</span><span class="s">"fixed-top"</span><span class="nt">&gt;</span>...<span class="nt">&lt;/div&gt;</span></code></pre></figure>

<h2 id="fixed-bottom">固定在底部</h2>

<p>一个元素置于可视区的底部，从边到边。必要时你需要增加额外的 CSS。</p>

<figure class="highlight"><pre><code class="language-html" data-lang="html"><span class="nt">&lt;div</span> <span class="na">class=</span><span class="s">"fixed-bottom"</span><span class="nt">&gt;</span>...<span class="nt">&lt;/div&gt;</span></code></pre></figure>

<h2 id="sticky-top">粘性置顶</h2>

<p>使用 <code class="highlighter-rouge">.sticky-top</code> 类可以让一个元素粘性置顶，它采用了 <code class="highlighter-rouge">position: sticky</code> 属性，不过这一属性目前不是所有浏览器都支持。</p>
<p><a href="http://www.cnblogs.com/coco1s/p/6402723.html" target="_blank" >扩展阅读：关于 <code class="highlighter-rouge">position: sticky</code> 的具体说明(中文，来源:cnblog)</a></p>

<p><strong>IE11 和 IE10 会把 <code class="highlighter-rouge">position: sticky</code> 作为 <code class="highlighter-rouge">position: relative</code> 。</strong> 因此，我们将样式包装在 <code class="highlighter-rouge">@supports</code> 查询中，将 <code class="highlighter-rouge">position: sticky</code> 制为只能正确呈现它的浏览器。</p>

<figure class="highlight"><pre><code class="language-html" data-lang="html"><span class="nt">&lt;div</span> <span class="na">class=</span><span class="s">"sticky-top"</span><span class="nt">&gt;</span>...<span class="nt">&lt;/div&gt;</span></code></pre></figure>
</div>